<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none;
            /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }

        .text {
            max-height: 3.6em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2em;
        }
    </style>


</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">站台列表列表</div>
            <div class="layui-card-body">
                <table id="stationlist" lay-filter="stationlistFilter"></table>
            </div>
        </div>
    </div>
    <!--歌手详情对话框-->
    <div id="singerDialog" style="padding:16px;display: none;">
        <table class="layui-table" lay-skin="nob">
            <tr>
                <td rowspan="3"><img id="headimg" src="" alt=""></td>
                <td><span id="sname" class="layui-font-22"></span></td>
            </tr>
            <tr>
                <td colspan="2">
                    <span id="details"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="text">
                    <span id="summary"></span>
                </td>
            </tr>
        </table>
        <hr>
        <h2 class="layui-padding-2">专辑 <span id="ablumCount"></span></h2>
        <div id="ablumTable" class="layui-col-space10">
        </div>
        <hr>
    </div>

    <script src="../res/layui/layui.js"></script>
    <script>
        layui.use(function () {
            //加载获取table模块
            var table = layui.table;
            //加载获取layer弹层模块
            var layer = layui.layer;
            //加载jquery对象
            var $ = layui.jquery;
            var util = layui.util;
            var upload = layui.upload;
            var form = layui.form;

            //表格数据渲染
            table.render({
                elem: '#stationlist',                              //用于渲染数据的表格元素选择器
                url: 'http://127.0.0.1:8080/station/list',         //服务端数据接口
                page: {//分页配置
                    curr: 1,
                    limit: 10,
                    limits: [5, 10, 20, 30]

                },                                      //开启分页
                cols: [[
                    { type: 'checkbox' },
                    { title: '序号', type: 'numbers' },
                    { title: 'ID', field: 'id' },
                    { title: '车站', field: 'name' },
                    { title: '车站等级', field: 'grade' },
                    { title: '图片', templet: '<div><img src="{{d.img}}" height="50px"></div>' },

                    { title: '操作', templet: '#rowTools', width: 300 },

                ]]
            })

            upload.render({
                elem: '#btnupdateStation',
                auto: false,
                field: 'myfile',
                accept: 'img',
                acceptMime: 'img/*',
                choose: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        //获取文件名称
                        let fname = file.name
                        //截取掉文件后缀
                        let i = fname.lastIndexOf('.')
                        fname = fname.substring(0, i)
                        //填充文件名到指定输入框控件 
                        $('#stationname').val(fname)

                        $('#ID-upload-demo-img').prop('src', result); // 图片链接（base64）
                    });
                },
            });



            table.on('tool(stationlistFilter)', function (obj) {
                //获取事件名
                let e = obj.event
                switch (e) {
                    case 'addfavorite':
                        //加入收藏夹
                        layer.open({
                            type: 1,
                            offset: 'r',
                            title: '选择需要加入的收藏夹',
                            anim: 'slideLeft', // 从右往左
                            area: ['320px', '100%'],
                            shade: 0.1,
                            shadeClose: true,
                            id: 'ID-demo-layer-direction-r',
                            content: '<div style="padding: 16px;" class="layui-btn-container"></div>',
                            success: function (layero, index, that) {
                                //发送ajax请求，查询所有歌单列表
                                $.get('http://127.0.0.1:8080/favorite/listAll', function (resp) {
                                    //获取所有歌单
                                    let list = resp.data
                                    //循环遍历歌单
                                    $.each(list, (i, e) => {
                                        //创建一个按钮对象
                                        let btn = $(`<button class="layui-btn layui-bg-blue layui-btn-fluid">${e.name}</button>`)
                                        //将按钮加入弹层中
                                        layero.find('#ID-demo-layer-direction-r>.layui-btn-container').append(btn)
                                        //为按钮绑定点击事件完成加入歌单请求
                                        btn.on('click', function () {
                                            //获取当前车站id
                                            let sid = obj.data.id
                                            //获取收藏夹id
                                            let listId = e.id
                                            let data = {
                                                listId: listId,
                                                sid: sid
                                            }
                                            //发送ajax请求
                                            $.post('http://127.0.0.1:8080/favoritedetails/add', data, function (resp) {
                                                if (resp.code === 0) {
                                                    layer.msg(resp.msg, function () {
                                                        layer.closeAll()
                                                    })
                                                } else {
                                                    layer.alert(resp.msg, { icon: 0 })
                                                }
                                            })
                                        })
                                    })
                                })
                            }
                        });
                        break;
                    case 'edit':
                        layer.open({
                            type: 1, // 使用HTML内容  
                            title: '修改车站',
                            area: ['600px', '420px'],
                            content: $('#editDialog'),
                            success: function () {
                                //数据回显
                                form.val('edit-form', obj.data)
                            },
                            btn: ['确定', '取消'], 
                            btnAlign:'c', 
                            btn1: function (index, layero) {
                                let data = form.val('edit-form')
                                //获取表单数据,并封装为formData对象
                                let formData = new FormData($('#edit-form')[0])
                                $.ajax({
                                    url: 'http://127.0.0.1:8080/station/update',
                                    type: 'PUT',
                                    processData: false,
                                    contentType: false,
                                    data: formData,
                                    success: function (resp) {
                                        if (resp.code === 0) {
                                            layer.msg(resp.msg)
                                            layer.closeAll()
                                            table.reloadData('stationlist', {
                                                scrollPos: 'fixed'  // 保持滚动条位置不变 
                                            })


                                        } else {
                                            layer.alert(resp.msg, { icon: 2 })
                                        }
                                    }
                                })

                            }
                        });
                        break;
                    case 'del':
                        //删除
                        layer.confirm('确认删除该车站吗?', { icon: 3 }, function () {
                            $.ajax({
                                url: `http://127.0.0.1:8080/station/del/${obj.data.id}`,
                                type: 'DELETE',
                                success: function (resp) {
                                    if (resp.code === 0) {
                                        layer.msg(resp.msg)
                                        //删除dom结构，并更新缓存
                                        obj.del()
                                    } else {
                                        layer.alert(resp.msg, { icon: 2 })
                                    }
                                }
                            })
                        })
                        break;
                }
            })


        })
    </script>

    <div id="editDialog" style="display: none;padding:20px">
        <form class="layui-form layui-form-pane" lay-filter="edit-form" id="edit-form">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <img class="layui-upload-img" id="ID-upload-demo-img" name="img"
                    style="width:92px;height: 92px;border: 1px solid rgba(0,0,0,0.1)">
                <div id="ID-upload-demo-text"></div>
            </div>
            <!-- 表单控件项：文件上传（专辑封面） -->
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-normal" type="button" id="btnupdateStation">
                    <i class="layui-icon layui-icon-upload"></i>
                    选择车站图片
                </button>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车站:</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="stationname" required lay-verify="required" placeholder="请输入名称："
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">等级:</label>
                <div class="layui-input-block">
                    <input type="radio" name="grade" value="特等站" title="特等站" checked>
                    <input type="radio" name="grade" value="一级站" title="一级站">
                    <input type="radio" name="grade" value="二级站" title="二级站">
                    <input type="radio" name="grade" value="三级站" title="三级站">
                </div>
            </div>
        </form>
    </div>

    <!--操作栏自定义模板-->
    <script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addfavorite">
            <i class="layui-icon layui-icon-more"></i>
            添加到收藏夹
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            修改
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>


</body>

</html>